<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref回调调用次数问题</title>
</head>
<body>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <div id="test"></div>
    <script type="text/babel">
        class Demo extends React.Component{
             state = {
                isHot:true
            }
            show = ()=>{
                console.log(this.input1.value);
            }
            changeWeather = ()=>{
                const isHot = this.state.isHot
                this.setState({isHot:!isHot})
            }
            saveInput = (currentNode)=>{
                console.log('@',currentNode);
                
                this.input1 = currentNode
            }
            render(){
                /*
                    如果ref回调函数是以内联函数方式定义的，在更新过程中它会被执行两次，
                    第一次传入参数null 让后第二次会传入参数DOM元素。
                    这是因为再每次渲染时会创建一个新的函数实例，所以React清空旧的ref并设置新的（内联函数调用后被回收）
                    但是无关紧要 可以采用类绑定函数形式解决执行两次 
                    后续直接内联函数不做处理
                */
                const {isHot} = this.state
                return (
                    <div>
                        <h2>---{isHot?'热':'冷'}</h2>
                       {/* <input type="text" placeholder="点击显示内容" ref={currentNode=>{this.input1=currentNode;console.log('@',currentNode);}
                        }/>*/}
                        {/*类绑定函数形式解决执行两次*/}
                        <input type="text" placeholder="点击显示内容" ref={this.saveInput}/>
                        <br />
                        <button onClick={this.show}>点击显示上方内容</button><br />
                        <button onClick={this.changeWeather}>点击切换天气</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo/>,document.querySelector('#test'))
    </script>
</body>
</html>